<template>
  <view class="page">
    <!-- #ifndef MP-WEIXIN -->
    <view class="status_bar"></view>
    <text
      v-if="showBackIcon"
      class="custom-icon custom-icon-jiantou2"
      @click="leftClick"
    ></text>
    <!-- <my-navbar v-if="showBackIcon" leftText=" " @leftClick="leftClick" background="#4fa388" leftIconColor="white"></my-navbar> -->
    <!-- #endif -->
    <div class="phone_login">欢迎登录</div>

    <div class="input_login">
      <!-- <input v-model="phone" type="text" value="" placeholder="请输入手机号码" placeholder-class="twelve_font"
			class="twelve_font" placeholder-style="color:#c0c0c0;" />
			<input v-model="phone" type="text" value="" placeholder="请输入手机号码" placeholder-class="twelve_font"
			class="twelve_font" placeholder-style="color:#c0c0c0;" /> -->
      <view class="input_box mobile_val">
        <input
          v-model="phone"
          type="text"
          value=""
          placeholder="请输入手机号"
          placeholder-class="twelve_font"
          class="twelve_font"
          placeholder-style="color:#666666; font-size: 26rpx"
          required
        />
      </view>
      <view class="input_box pwd_val">
        <input
          v-model="password"
          type="password"
          value=""
          placeholder="请输入密码"
          placeholder-class="twelve_font"
          class="twelve_font"
          placeholder-style="color:#666666; font-size: 26rpx"
        />
      </view>

      <view class="bg">
        <view class="submit" @click="submit">登录</view>
        <view class="other_btn flex-around">
          <text v-show="showRegist" @click="navigato(1)">立即注册</text>
          <text @click="navigato(2)">忘记密码</text>
        </view>
        <!-- #ifndef APP-PLUS -->
        <!-- <u-divider>OR</u-divider> -->
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <!-- <button class="wxlogin wxbtn" @click="wxLogin" open-type="getUserInfo">
					<image src="../../static/image/7.png" mode=""></image>
					<text>微信登录</text>
				</button> -->
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <!-- <view class="wxlogin" @click="wxLogin">
					<image src="../../static/image/7.png" mode=""></image>
					<text>微信登录</text>
				</view> -->
        <!-- #endif -->
      </view>
    </div>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      //是否可以返回到首页
      showBackIcon: false,
      showRegist: true,
      logoUrl: "",
      phone: "",
      password: "",
      isshowProp: false,
      //登陆权限
      loginVolid: {},
      code: null,
      href: null,
    };
  },
  onLoad() {
    var token = uni.getStorageSync("copartner_token");
    if (token) {
      uni.switchTab({
        url: "../tabar/index",
      });
    } else {
      this.getInfo();
    }
  },
  onShow() {
    // #ifdef H5
    let search = location.search;
    let code = search.substring(
      search.indexOf("=") + 1,
      search.lastIndexOf("&")
    );
    this.code = code;
    let isWeixin = uni.getStorageSync("isWeixin");
    if (isWeixin && code) {
      let params = {
        loginType: "wechat",
        type: "default",
        code: code,
      };
      $https(
        "POST",
        "wxLogin",
        params,
        (res) => {
          uni.removeStorageSync("isWeixin");
          if (res.data.errcode == 0) {
            if (res.data.data.token) {
              uni.setStorageSync("copartner_token", res.data.data.token);
              uni.reLaunch({
                url: "/pages/tabar/index",
              });
            } else {
              // uni.showModal({
              // 	content:res.data.data.user_openid
              // })
              uni.navigateTo({
                url: `/pages/account/need_bind?user_openid=${res.data.data.user_openid}`,
              });
            }
          } else {
            //到需要绑定界面返回会提示openid已被使用
            uni.showToast({
              icon: "none",
              title: res.data.errmsg,
            });
          }
        },
        true
      );
    }
    // #endif
  },
  methods: {
    getInfo() {
      $https(
        "GETN",
        "loginInfo",
        {},
        (res) => {
          this.logoUrl = res.data.data.info.site_logo;
          uni.setNavigationBarTitle({
            title: res.data.data.info.site_title,
          });
          this.loginVolid = {
            is_login_index: res.data.data.info.is_login_index,
            is_login_my: res.data.data.info.is_login_my,
            is_login_cart: res.data.data.info.is_login_cart,
            is_login_category: res.data.data.info.is_login_category,
            is_site_phone: res.data.data.info.site_phone,
          };
          if (res.data.data.info.is_login_index == 0) {
            // this.showBackIcon = true;
          }
          this.showRegist =
            res.data.data.info.open_registration == 2 ? false : true;
          uni.setStorageSync(
            "showRegist",
            res.data.data.info.open_registration
          );
          uni.setStorageSync("title", res.data.data.info.site_title);
          uni.setStorageSync("logo", this.logoUrl);
          uni.setStorageSync("loginVolid", this.loginVolid);
          uni.setStorageSync("phone", res.data.data.info.site_phone);
          this.companyList = res.data.data.company_list;
        },
        true
      );
    },
    submit() {
      if (!this.phone || !this.password) {
        uni.showToast({
          title: "账号或密码不能为空",
          icon: "none",
        });
        return;
      } else if (!/^1[23456789]\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "手机号格式错误",
          icon: "none",
        });
        return;
      } else {
        var params = {
          mobile: this.phone,
          password: this.password,
        };
        $https("POST", "login", params, (res) => {
          if (res.data.errcode == 0) {
            uni.setStorageSync("copartner_token", res.data.data.token);
            uni.reLaunch({
              url: "../tabar/index",
            });
            return;
          }
          var msg;
          if (res.data.errmsg) {
            msg = res.data.errmsg;
          } else {
            res.data.errors.mobile
              ? (msg = res.data.errors.mobile[0])
              : res.data.errors.password
              ? (msg = res.data.errors.password[0])
              : "";
          }
          uni.showToast({
            title: msg,
            icon: "none",
          });
        });
      }
    },
    navigato(type) {
      if (type == 1) {
        uni.navigateTo({
          url: "../account/register",
        });
      } else if (type == 2) {
        uni.navigateTo({
          url: "../account/forget",
        });
      }
    },
    leftClick() {
      uni.switchTab({
        url: "../tabar/index",
      });
      // // #ifdef H5
      // 	window.history.back(-1);
      // // #endif
      // // #ifndef H5
      // 	uni.navigateBack();
      // // #endif
    },
    wxLogin() {
      // #ifdef H5
      let params = {
        type: "default",
      };
      $https(
        "GETN",
        "wxConfig",
        params,
        (res) => {
          if (res.data.errcode == 0) {
            uni.setStorageSync("isWeixin", true);
            let url = getApp().globalData.rootUrl + "/cmp#/pages/account/login";
            url = encodeURIComponent(url);
            let a = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${res.data.data.appId}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo#wechat_redirect`;
            window.location.href = a;
          } else {
            uni.showToast({
              icon: "none",
              title: res.data.errmsg,
            });
          }
        },
        true
      );
      // #endif
      // #ifdef MP-WEIXIN
      uni.getUserInfo({
        provider: "weixin",
        success: (infoRes) => {
          let { encryptedData, iv } = infoRes;
          uni.login({
            success: (res) => {
              let params = {
                loginType: "wechat",
                type: "mini",
                code: res.code,
                encryptedData,
                iv,
              };
              $https(
                "POST",
                "wxLogin",
                params,
                (res) => {
                  if (res.data.errcode == 0) {
                    if (res.data.data.token) {
                      uni.setStorageSync(
                        "copartner_token",
                        res.data.data.token
                      );
                      uni.reLaunch({
                        url: "/pages/tabar/index",
                      });
                    } else {
                      uni.navigateTo({
                        url: `/pages/account/need_bind?user_openid=${res.data.data.user_openid}`,
                      });
                    }
                  } else {
                    uni.showToast({
                      icon: "none",
                      title: res.data.errmsg,
                    });
                  }
                },
                true
              );
            },
          });
        },
        fail(err) {},
      });
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.status_bar {
  background: $dgreen;
}

.page {
  // background: $dgreen;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;

  .custom-icon {
    position: absolute;
    top: 20rpx;
    // #ifdef APP-PLUS
    top: calc(20rpx + var(--status-bar-height));
    // #endif
    left: 20rpx;
    font-size: 60rpx;
    color: #333;
    z-index: 99;
  }

  .top {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 360rpx;

    .login_logo {
      height: 200rpx;
    }
  }

  .login {
    min-height: calc(100vh - 360rpx);
    display: flex;
    flex-direction: column;

    .select_way {
      // height:500rpx;
      background: #fff;
      border-top-right-radius: 100%;
      padding: 38rpx 28rpx 0;

      .title {
        .wel {
          font-size: 36rpx;
          color: #515151;
          font-weight: 500;
        }

        .login_name {
          font-size: 60rpx;
          font-weight: 600;
          color: #191919;
        }
      }

      .input_box {
        margin-top: 48rpx;

        .bold:first-child {
          margin-bottom: 18rpx;
        }

        .input {
          color: rgb(192, 192, 192);
          border-bottom: 1px solid #d5d5d5;
          width: 60%;
          font-size: 32rpx;
          padding: 8rpx 0;

          &.active {
            color: #000;
          }
        }

        & > input {
          padding: 8rpx 0;
        }
      }
    }
  }

  input {
    border-bottom: 1px solid #d5d5d5;
    width: 60%;
  }

  /deep/.u-divider {
    display: flex;
    padding: 0 28rpx;

    .u-divider-line {
      flex: 1;
    }
  }

  .wxlogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16rpx;
    color: #4e5452;
    margin-top: 24rpx;
    margin-bottom: 20rpx;

    image {
      width: 52rpx;
      height: 40rpx;
      margin-bottom: 8rpx;
    }

    &.wxbtn {
      background: none;
      border: none;

      &::after {
        border: none;
      }
    }
  }

  .phone_login {
    position: absolute;
    font-size: 76rpx;
    color: #333;
    top: calc(70rpx + var(--status-bar-height));
    height: 300rpx;
    line-height: 300rpx;
    padding: 0 60rpx;
    font-weight: 600;
    letter-spacing: 2rpx;
    width: calc(100% - 120rpx);
  }

  .input_login {
    position: absolute;
    top: calc(370rpx + var(--status-bar-height));
    width: calc(100% - 120rpx);
    padding: 0 60rpx;
    .twelve_font {
      width: 100%;
      height: 108rpx;
      line-height: 108rpx;
    }
  }

  .bg {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .other_btn {
      width: 100%;
      padding: 40rpx 160rpx;
      color: #9a9a9a;
      font-size: 28rpx;
    }

    .submit {
      width: 578rpx;
      height: 80rpx;
      color: #fff;
      background: $dgreen;
      box-shadow: 0px 2rpx 14rpx 2rpx rgba(0, 0, 0, 0.2);
      border-radius: 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 40rpx;
      font-size: 36rpx;
    }

    .bottom {
      position: fixed;
      bottom: 30rpx;
      text-align: center;

      .green {
        color: #4fa388;
      }
    }
  }
}
</style>
